<!--
 * @Author: your name
 * @Date: 2021-08-31 19:44:13
 * @LastEditTime: 2021-09-02 14:33:22
 * @LastEditors: your name
 * @Description: In User Settings Edit
 * @FilePath: \经纪人\broker-page\app\src\views\index\qiuzhu\index.vue
-->
<!--  -->
<template>
  <div class="qiuzhu">
    <van-sticky>
      <div class="header">
        <van-icon name="arrow-left" @click="qiuzhu" />
        <span>房屋求租</span>
        <span></span>
      </div>
    </van-sticky>

    <div class="main">
      <Qiu></Qiu>
      <div class="qiu">
        <dl v-for="(item, index) in list" :key="(item, index)">
          <dt>
            <div class="name">
              <div class="img">
                <img
                  src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fnimg.ws.126.net%2F%3Furl%3Dhttp%253A%252F%252Fdingyue.ws.126.net%252F2021%252F0730%252F428d92c6j00qx18rh000ic000b400b4c.jpg%26thumbnail%3D650x2147483647%26quality%3D80%26type%3Djpg&refer=http%3A%2F%2Fnimg.ws.126.net&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1633164578&t=6f0e607a66939083ac786ae0983c6b95"
                  alt=""
                />
                <h4>{{ item.name }}</h4>
              </div>

              <span>{{ item.time }}</span>
            </div>
            <div class="city">
              <span>{{ item.title }}</span>
            </div>
          </dt>
          <dd>
            <span
              >意向区域:<span class="itemcity">{{ item.city }}</span></span
            >
            <span
              >意向价格:<span class="price">{{ item.price }}/月</span></span
            >
            <span
              >房产类型:<span class="type">{{ item.type }}</span></span
            >
            <span @click="an()"><van-icon name="chat"/></span>
            <span @click="hua()"><van-icon name="phone"/></span>
          </dd>
        </dl>
      </div>
    </div>
  </div>
</template>

<script>
import axios from "axios";
import Qiu from "../../../components/qiu.vue";
export default {
  //import引入的组件需要注入到对象中才能使用
  components: {
    Qiu,
  },

  data() {
    //这里存放数据
    return {
      list: [],
    };
  },
  //监听属性 类似于data概念
  computed: {},
  //监控data中的数据变化
  watch: {},
  //方法集合
  methods: {
    qiuzhu() {
      this.$router.go(-1);
    },
    an() {
      this.$router.push("/xinxi");
    },
    hua() {
      this.$router.push("/dianhua");
    },
  },
  created() {
    axios.get("/qiuzhu").then((res) => {
      console.log(res.data.data);
      this.list = res.data.data;
    });
  },
};
</script>
<style lang="scss" scoped>
.qiuzhu {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  .header {
    width: 100%;
    height: 40px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: #fff;
    font-size: 18px;
    padding: 0 10px;
    background-image: linear-gradient(to right, #0272f0, #2593f9, #39a5ff);
  }
  .main {
    width: 100%;
    flex: 1;
    overflow-y: auto;
    background: #eee;
    .qiu {
      width: 100%;
      dl {
        width: 100%;
        height: 170px;
        background: #fff;
        margin-bottom: 15px;
        padding: 0 10px;
        dt {
          border-bottom: 1px solid #ccc;
          .name {
            width: 100%;
            height: 50px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            .img {
              display: flex;
              align-items: center;
              margin-top: 15px;
              img {
                width: 50px;
                height: 50px;
                border-radius: 50%;
                margin: 0 10px;
              }
            }
          }
          .city {
            width: 100%;
            height: 60px;
            line-height: 60px;
            font-size: 18px;
          }
        }
        dd {
          width: 100%;
          height: 60px;
          display: flex;
          line-height: 60px;
          justify-content: space-around;
          span {
            font-size: 12px;
            padding-right: 5px;
            .itemcity {
              color: orange;
            }
            .price {
              color: orange;
            }
            .type {
              color: orangered;
            }
            i {
              width: 30px;
              height: 30px;
              line-height: 30px;
              text-align: center;
              border-radius: 50%;
              font-size: 18px;
              color: #f96a6f;
              background: #f8e0e0;
            }
          }
        }
      }
    }
  }
}
</style>
